<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <title>Vue Page Transition</title>

    <!-- Required Stylesheets -->
    <link
      type="text/css"
      rel="stylesheet"
      href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
    />
    <link
      type="text/css"
      rel="stylesheet"
      href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"
    />

    <link
      type="text/css"
      rel="stylesheet"
      href="dist/vue-page-transition.css"
    />

    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css" rel="stylesheet">

    <!-- Required scripts -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
    <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.3/vue-router.min.js"></script>
    <script src="dist/vue-page-transition.browser.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
    <script
      charset="UTF-8"
      src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/javascript.min.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', (event) => {
        document.querySelectorAll('pre code').forEach((block) => {
          hljs.highlightBlock(block);
        });
      });
    </script>
    <style>
      .body,
      h1,
      h2,
      h3,
      h4 {
        font-family: 'Source Sans Pro', sans-serif;
      }
    </style>
  </head>
  <body>
    <!-- Our application root element -->
    <div id="app">
      <b-navbar type="dark" variant="dark" style="justify-content: space-between;">
        <b-navbar-nav>
          <b-nav-item to="/">Home</b-nav-item>

          <!-- Navbar dropdowns -->
          <b-nav-item-dropdown text="Fade" left>
            <b-dropdown-item to="/fade/default">Default</b-dropdown-item>
            <b-dropdown-item to="/fade/up">Up</b-dropdown-item>
            <b-dropdown-item to="/fade/right">Right</b-dropdown-item>
            <b-dropdown-item to="/fade/down">Down</b-dropdown-item>
            <b-dropdown-item to="/fade/left">Left</b-dropdown-item>
          </b-nav-item-dropdown>

          <b-nav-item-dropdown text="Overlay" left>
            <b-dropdown-item to="/overlay/up">Up</b-dropdown-item>
            <b-dropdown-item to="/overlay/right">Right</b-dropdown-item>
            <b-dropdown-item to="/overlay/down">Down</b-dropdown-item>
            <b-dropdown-item to="/overlay/left">Left</b-dropdown-item>
            <b-dropdown-item to="/overlay/up-full">Up Full</b-dropdown-item>
            <b-dropdown-item to="/overlay/right-full">Right Full</b-dropdown-item>
            <b-dropdown-item to="/overlay/down-full">Down Full</b-dropdown-item>
            <b-dropdown-item to="/overlay/left-full">Left Full</b-dropdown-item>
            <b-dropdown-item to="/overlay/up-down">Up Down</b-dropdown-item>
            <b-dropdown-item to="/overlay/left-right">Left Right</b-dropdown-item>
          </b-nav-item-dropdown>

          <b-nav-item-dropdown text="Flip" left>
              <b-dropdown-item to="/flip/x">X</b-dropdown-item>
              <b-dropdown-item to="/flip/y">Y</b-dropdown-item>
            </b-nav-item-dropdown>

          <b-nav-item-dropdown text="Zoom" left>
            <b-dropdown-item to="/zoom/default">Default</b-dropdown-item>
          </b-nav-item-dropdown>
        </b-navbar-nav>
        <a href="https://github.com/Orlandster/vue-page-transition" target="_blank">
          <svg width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" fill="rgba(255,255,255,.5)"x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" xml:space="preserve"><path d="M15.5 22.7h-.1l-.1-.1V22v-2.5c0-.7-.1-1.3-.4-1.8 2.3-.4 4.8-1.6 4.8-6.1 0-1.2-.4-2.3-1.1-3.2.2-.6.3-1.7-.2-3.1l-.3-.3s-.2-.1-.4-.1c-.6 0-1.5.2-3 1.2-.8-.1-1.7-.3-2.7-.3-1 0-1.9.1-2.8.3C7.8 5.2 6.8 5 6.2 5c-.2 0-.3.1-.4.1-.1 0-.3.2-.3.3-.5 1.4-.4 2.5-.2 3.1-.7.9-1.1 2-1.1 3.2 0 4.4 2.6 5.6 4.8 6.1-.1.2-.2.5-.3.8-.2.1-.5.2-.9.2s-.8-.1-1.1-.4l-.1-.1c-.1-.1-.1-.2-.2-.2l-.1-.1-.1-.1c0-.1-.8-1.3-2.2-1.4-.5 0-.9.2-1 .5-.2.5.4.9.7 1.1 0 0 .6.3 1 1.4.2.7 1.1 2 3.2 2h.7v1.4l-.1.1s-.1 0 0 0C4 21.2 1 17 1 12.3c0-6.1 4.9-11 11-11s11 4.9 11 11c0 4.7-3 8.9-7.5 10.4z"/><metadata><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:dc="http://purl.org/dc/elements/1.1/"><rdf:Description about="https://iconscout.com/legal#licenses" dc:title="github" dc:description="github" dc:publisher="Iconscout" dc:date="2018-01-30" dc:format="image/svg+xml" dc:language="en"><dc:creator><rdf:Bag><rdf:li>Roundicons.com</rdf:li></rdf:Bag></dc:creator></rdf:Description></rdf:RDF></metadata></svg>
        </a>
      </b-navbar>
      <div class="p-4">
        <vue-page-transition name="fade">
            <router-view/>
        </vue-page-transition>
      </div>
    </div>
    <!-- Start running your app -->
    <script>
      var home = Vue.component('home', {
        template: `
          <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: calc(100vh - 104px);">
            <img src="vue.png" style="width: 250px; margin-bottom: 20px;" />
            <h1 style="margin-bottom: 10px; font-size: 45px;">Vue Page Transition</h1>
            <p style="font-size: 17px;">
              A simple and lightweight Plugin to add wonderful page / router transitions to your project.
            </p>
          </div>
        `
      })

      var fadeDefault = Vue.component('fade-default', {
        template: `
          <div>
            <h1>Default Fade</h1>
            <p style="margin-bottom: 25px;">The default fade transtion smoothly changes the visibility of the pages without any directional change.</p>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Global Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions globally by defining the name property</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">&lt;vue-page-transition name="fade"&gt;
  &lt;router-view /&gt;
&lt;/vue-page-transition&gt;</code>
              </pre>
            </div>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Local Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions locally by passing a transition's meta field to your route.</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // overwrite default transition
      meta: { transition: 'fade' },
    },
  ]
})</code>
              </pre>
            </div>
          </div>
        `
      })

      var fadeUp = Vue.component('fade-up', {
        template: `
          <div>
            <h1>Fade In Up</h1>
            <p style="margin-bottom: 25px;">The old page smoothly disappears, while the new page fades in from the bottom.</p>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Global Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions globally by defining the name property</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">&lt;vue-page-transition name="fade-in-up"&gt;
  &lt;router-view /&gt;
&lt;/vue-page-transition&gt;</code>
              </pre>
            </div>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Local Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions locally by passing a transition's meta field to your route.</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // overwrite default transition
      meta: { transition: 'fade-in-up' },
    },
  ]
})</code>
              </pre>
            </div>
          </div>
        `
      })

      var fadeRight = Vue.component('fade-right', {
        template: `
          <div>
            <h1>Fade In Right</h1>
            <p style="margin-bottom: 25px;">The old page smoothly disappears, while the new page fades in from right.</p>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Global Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions globally by defining the name property</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">&lt;vue-page-transition name="fade-in-right"&gt;
  &lt;router-view /&gt;
&lt;/vue-page-transition&gt;</code>
              </pre>
            </div>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Local Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions locally by passing a transition's meta field to your route.</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // overwrite default transition
      meta: { transition: 'fade-in-right' },
    },
  ]
})</code>
              </pre>
            </div>
          </div>
        `
      })

      var fadeDown = Vue.component('fade-down', {
        template: `
          <div>
            <h1>Fade In Down</h1>
            <p style="margin-bottom: 25px;">The old page smoothly disappears, while the new page fades in from top.</p>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Global Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions globally by defining the name property</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">&lt;vue-page-transition name="fade-in-down"&gt;
  &lt;router-view /&gt;
&lt;/vue-page-transition&gt;</code>
              </pre>
            </div>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Local Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions locally by passing a transition's meta field to your route.</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // overwrite default transition
      meta: { transition: 'fade-in-down' },
    },
  ]
})</code>
              </pre>
            </div>
          </div>
        `
      })

      var fadeLeft = Vue.component('fade-left', {
        template: `
          <div>
            <h1>Fade In Left</h1>
            <p style="margin-bottom: 25px;">The old page smoothly disappears, while the new page fades in from left.</p>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Global Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions globally by defining the name property</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">&lt;vue-page-transition name="fade-in-left"&gt;
  &lt;router-view /&gt;
&lt;/vue-page-transition&gt;</code>
              </pre>
            </div>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Local Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions locally by passing a transition's meta field to your route.</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // overwrite default transition
      meta: { transition: 'fade-in-left' },
    },
  ]
})</code>
              </pre>
            </div>
          </div>
        `
      })

      var zoom = Vue.component('zoom', {
        template: `
          <div>
            <h1>Default Zoom</h1>
            <p style="margin-bottom: 25px;">The old page smoothly zooms out and then new page zooms in.</p>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Global Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions globally by defining the name property</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">&lt;vue-page-transition name="zoom"&gt;
  &lt;router-view /&gt;
&lt;/vue-page-transition&gt;</code>
              </pre>
            </div>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Local Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions locally by passing a transition's meta field to your route.</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // overwrite default transition
      meta: { transition: 'zoom' },
    },
  ]
})</code>
              </pre>
            </div>
          </div>
        `
      })

      var flipX = Vue.component('flip-x', {
        template: `
          <div>
            <h1>Flip X</h1>
            <p style="margin-bottom: 25px;">The old page flips horizontally into the new page.</p>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Global Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions globally by defining the name property</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">&lt;vue-page-transition name="flip-x"&gt;
  &lt;router-view /&gt;
&lt;/vue-page-transition&gt;</code>
              </pre>
            </div>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Local Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions locally by passing a transition's meta field to your route.</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // overwrite default transition
      meta: { transition: 'flip-x' },
    },
  ]
})</code>
              </pre>
            </div>
          </div>
        `
      })

      var flipY = Vue.component('flip-y', {
        template: `
          <div>
            <h1>Flip Y</h1>
            <p style="margin-bottom: 25px;">The old page flips vertically into the new page.</p>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Global Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions globally by defining the name property</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">&lt;vue-page-transition name="flip-y"&gt;
  &lt;router-view /&gt;
&lt;/vue-page-transition&gt;</code>
              </pre>
            </div>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Local Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions locally by passing a transition's meta field to your route.</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // overwrite default transition
      meta: { transition: 'flip-y' },
    },
  ]
})</code>
              </pre>
            </div>
          </div>
        `
      })

      var overlayUp = Vue.component('overlay-up', {
        template: `
          <div>
            <h1>Overlay Up</h1>
            <p style="margin-bottom: 25px;">The overlay grows from the bottom to the top and back.</p>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Global Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions globally by defining the name property</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">&lt;vue-page-transition name="overlay-up"&gt;
  &lt;router-view /&gt;
&lt;/vue-page-transition&gt;</code>
              </pre>
            </div>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Local Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions locally by passing a transition's meta field to your route.</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // overwrite default transition
      meta: { transition: 'overlay-up' },
    },
  ]
})</code>
              </pre>
            </div>
          </div>
        `
      })

      var overlayRight = Vue.component('overlay-right', {
        template: `
          <div>
            <h1>Overlay Right</h1>
            <p style="margin-bottom: 25px;">The overlay grows from the left to the right and back.</p>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Global Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions globally by defining the name property</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">&lt;vue-page-transition name="overlay-right"&gt;
  &lt;router-view /&gt;
&lt;/vue-page-transition&gt;</code>
              </pre>
            </div>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Local Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions locally by passing a transition's meta field to your route.</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // overwrite default transition
      meta: { transition: 'overlay-right' },
    },
  ]
})</code>
              </pre>
            </div>
          </div>
        `
      })

      var overlayDown = Vue.component('overlay-down', {
        template: `
          <div>
            <h1>Overlay Down</h1>
            <p style="margin-bottom: 25px;">The overlay grows from the top to the bottom and back.</p>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Global Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions globally by defining the name property</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">&lt;vue-page-transition name="overlay-down"&gt;
  &lt;router-view /&gt;
&lt;/vue-page-transition&gt;</code>
              </pre>
            </div>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Local Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions locally by passing a transition's meta field to your route.</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // overwrite default transition
      meta: { transition: 'overlay-down' },
    },
  ]
})</code>
              </pre>
            </div>
          </div>
        `
      })

      var overlayLeft = Vue.component('overlay-left', {
        template: `
          <div>
            <h1>Overlay Left</h1>
            <p style="margin-bottom: 25px;">The overlay grows from the right to the left and back.</p>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Global Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions globally by defining the name property</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">&lt;vue-page-transition name="overlay-left"&gt;
  &lt;router-view /&gt;
&lt;/vue-page-transition&gt;</code>
              </pre>
            </div>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Local Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions locally by passing a transition's meta field to your route.</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // overwrite default transition
      meta: { transition: 'overlay-left' },
    },
  ]
})</code>
              </pre>
            </div>
          </div>
        `
      })

      var overlayDownFull = Vue.component('overlay-down-full', {
        template: `
          <div>
            <h1>Overlay Down Full</h1>
            <p style="margin-bottom: 25px;">The overlay grows from the top to the bottom and then shrinks from top to the bottom.</p>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Global Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions globally by defining the name property</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">&lt;vue-page-transition name="overlay-down-full"&gt;
  &lt;router-view /&gt;
&lt;/vue-page-transition&gt;</code>
              </pre>
            </div>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Local Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions locally by passing a transition's meta field to your route.</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // overwrite default transition
      meta: { transition: 'overlay-down-full' },
    },
  ]
})</code>
              </pre>
            </div>
          </div>
        `
      })

      var overlayUpFull = Vue.component('overlay-up-full', {
        template: `
          <div>
            <h1>Overlay Up Full</h1>
            <p style="margin-bottom: 25px;">The overlay grows from the bottom to the top and then shrinks from bottom to the top.</p>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Global Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions globally by defining the name property</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">&lt;vue-page-transition name="overlay-up-full"&gt;
  &lt;router-view /&gt;
&lt;/vue-page-transition&gt;</code>
              </pre>
            </div>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Local Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions locally by passing a transition's meta field to your route.</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // overwrite default transition
      meta: { transition: 'overlay-up-full' },
    },
  ]
})</code>
              </pre>
            </div>
          </div>
        `
      })

      var overlayRightFull = Vue.component('overlay-right-full', {
        template: `
          <div>
            <h1>Overlay Right Full</h1>
            <p style="margin-bottom: 25px;">The overlay grows from the left to the right and then shrinks from left to the right.</p>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Global Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions globally by defining the name property</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">&lt;vue-page-transition name="overlay-right-full"&gt;
  &lt;router-view /&gt;
&lt;/vue-page-transition&gt;</code>
              </pre>
            </div>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Local Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions locally by passing a transition's meta field to your route.</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // overwrite default transition
      meta: { transition: 'overlay-right-full' },
    },
  ]
})</code>
              </pre>
            </div>
          </div>
        `
      })

      var overlayLeftFull = Vue.component('overlay-left-full', {
        template: `
          <div>
            <h1>Overlay Left Full</h1>
            <p style="margin-bottom: 25px;">The overlay grows from the left to the right and then shrinks from left to the right.</p>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Global Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions globally by defining the name property</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">&lt;vue-page-transition name="overlay-left-full"&gt;
  &lt;router-view /&gt;
&lt;/vue-page-transition&gt;</code>
              </pre>
            </div>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Local Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions locally by passing a transition's meta field to your route.</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // overwrite default transition
      meta: { transition: 'overlay-left-full' },
    },
  ]
})</code>
              </pre>
            </div>
          </div>
        `
      })

      var overlayUpDown = Vue.component('overlay-up-down', {
        template: `
          <div>
            <h1>Overlay Up Down</h1>
            <p style="margin-bottom: 25px;">The overlay grows from the bottom and top at the same time and back.</p>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Global Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions globally by defining the name property</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">&lt;vue-page-transition name="overlay-up-down"&gt;
  &lt;router-view /&gt;
&lt;/vue-page-transition&gt;</code>
              </pre>
            </div>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Local Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions locally by passing a transition's meta field to your route.</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // overwrite default transition
      meta: { transition: 'overlay-up-down' },
    },
  ]
})</code>
              </pre>
            </div>
          </div>
        `
      })

      var overlayLeftRight = Vue.component('overlay-left-right', {
        template: `
          <div>
            <h1>Overlay Left Right</h1>
            <p style="margin-bottom: 25px;">The overlay grows from the left and right at the same time and back.</p>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Global Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions globally by defining the name property</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">&lt;vue-page-transition name="overlay-left-right"&gt;
  &lt;router-view /&gt;
&lt;/vue-page-transition&gt;</code>
              </pre>
            </div>
            <h2 style="font-size: 19px; font-weight: 600; margin-bottom: 7px;">Local Usage</h2>
            <p style="margin-bottom: 15px;">You can use transitions locally by passing a transition's meta field to your route.</p>
            <div id="codebox" style="margin-bottom: 30px;">
              <pre style="display: flex; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0,0,0,.125); width: fit-content;">
                <code data-language="html" style="background-color: #f9f9f9; padding: 15px; width: 500px;">export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // overwrite default transition
      meta: { transition: 'overlay-left-right' },
    },
  ]
})</code>
              </pre>
            </div>
          </div>
        `
      })

      var router = new VueRouter({
        routes: [
          {
            path: '/',
            name: 'Vue Page Transition',
            component: home,
            meta: { transition: 'fade' },
          },
          {
            path: '/fade/default',
            name: 'Default Fade - Vue Page Transition',
            component: fadeDefault,
            meta: { transition: 'fade' },
          },
          {
            path: '/fade/up',
            name: 'Fade In Up - Vue Page Transition',
            component: fadeUp,
            meta: { transition: 'fade-in-up' },
          },
          {
            path: '/fade/right',
            name: 'Fade In Right - Vue Page Transition',
            component: fadeRight,
            meta: { transition: 'fade-in-right' },
          },
          {
            path: '/fade/down',
            name: 'Fade In Down - Vue Page Transition',
            component: fadeDown,
            meta: { transition: 'fade-in-down' },
          },
          {
            path: '/fade/left',
            name: 'Fade In Left - Vue Page Transition',
            component: fadeLeft,
            meta: { transition: 'fade-in-left' },
          },
          {
            path: '/zoom/default',
            name: 'Default Zoom - Vue Page Transition',
            component: zoom,
            meta: { transition: 'zoom' },
          },
          {
            path: '/flip/x',
            name: 'Flip X - Vue Page Transition',
            component: flipX,
            meta: { transition: 'flip-x' },
          },
          {
            path: '/flip/y',
            name: 'Flip Y - Vue Page Transition',
            component: flipY,
            meta: { transition: 'flip-y' },
          },
          {
            path: '/overlay/up',
            name: 'Overlay Up - Vue Page Transition',
            component: overlayUp,
            meta: { transition: 'overlay-up' },
          },
          {
            path: '/overlay/right',
            name: 'Overlay Right - Vue Page Transition',
            component: overlayRight,
            meta: { transition: 'overlay-right' },
          },
          {
            path: '/overlay/down',
            name: 'Overlay Down - Vue Page Transition',
            component: overlayDown,
            meta: { transition: 'overlay-down' },
          },
          {
            path: '/overlay/left',
            name: 'Overlay Left - Vue Page Transition',
            component: overlayLeft,
            meta: { transition: 'overlay-left' },
          },
          {
            path: '/overlay/up-full',
            name: 'Overlay Up Full - Vue Page Transition',
            component: overlayUpFull,
            meta: { transition: 'overlay-up-full' },
          },
          {
            path: '/overlay/down-full',
            name: 'Overlay Left - Vue Page Transition',
            component: overlayDownFull,
            meta: { transition: 'overlay-down-full' },
          },
          {
            path: '/overlay/right-full',
            name: 'Overlay Right Full - Vue Page Transition',
            component: overlayRightFull,
            meta: { transition: 'overlay-right-full' },
          },
          {
            path: '/overlay/left-full',
            name: 'Overlay Left Full - Vue Page Transition',
            component: overlayLeftFull,
            meta: { transition: 'overlay-left-full' },
          },
          {
            path: '/overlay/up-down',
            name: 'Overlay Up Down - Vue Page Transition',
            component: overlayUpDown,
            meta: { transition: 'overlay-up-down' },
          },
          {
            path: '/overlay/left-right',
            name: 'Overlay Left Right - Vue Page Transition',
            component: overlayLeftRight,
            meta: { transition: 'overlay-left-right' },
          }
        ]
      })

      Vue.use(VuePageTransition)

      window.app = new Vue({
        el: '#app',
        router,
      })
    </script>
  </body>
</html>